<template>
  <div id="app">
    <!-- 登录页面：完全独立的布局 -->
    <router-view v-if="isLoginPage" />

    <!-- 系统页面：带侧边栏的管理后台布局 -->
    <el-container v-else class="admin-layout">
      <!-- 侧边栏 -->
      <el-aside width="250px" class="admin-sidebar">
        <div class="logo-container">
          <el-icon class="logo-icon"><MapLocation /></el-icon>
          <h2 class="logo-title">景点标注管理</h2>
        </div>

        <el-menu
          :default-active="$route.path"
          router
          class="sidebar-menu"
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409eff"
          unique-opened
        >
          <el-menu-item index="/annotation-editor">
            <el-icon><Edit /></el-icon>
            <span>PC端配置</span>
          </el-menu-item>
          <el-menu-item index="/annotation-editorMobile">
            <el-icon><Edit /></el-icon>
            <span>移动端配置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主要内容区域 -->
      <el-container>
        <!-- 顶部导航栏 -->
        <el-header class="admin-header">
          <div class="header-left">
            <el-button
              type="text"
              :icon="isSidebarCollapsed ? 'Expand' : 'Fold'"
              @click="toggleSidebar"
              class="sidebar-toggle"
            />
            <el-breadcrumb separator="/">
              <el-breadcrumb-item>{{ currentPageTitle }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <div class="header-right">
            <el-dropdown @command="handleUserCommand">
              <span class="user-dropdown">
                <el-icon><User /></el-icon>
                <span>{{ userInfo.nickname || '管理员' }}</span>
                <el-icon><ArrowDown /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="about">关于系统</el-dropdown-item>
                  <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 主要内容 -->
        <el-main class="admin-main">
          <router-view/>
        </el-main>
      </el-container>
    </el-container>

    <!-- 关于系统对话框 -->
    <el-dialog v-model="showAboutDialog" title="关于系统" width="500px">
      <div class="about-content">
        <div class="about-header">
          <el-icon class="about-icon"><MapLocation /></el-icon>
          <div>
            <h3>景点标注管理系统</h3>
            <p>版本 v1.0.0</p>
          </div>
        </div>
        <el-divider />
        <p>专为旅游景点项目设计的交互式标注管理系统，支持图片标注编辑和大屏预览展示。</p>
        <div class="tech-tags">
          <el-tag>Vue 3</el-tag>
          <el-tag type="success">Element Plus</el-tag>
          <el-tag type="warning">Vuex</el-tag>
          <el-tag type="info">响应式设计</el-tag>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Edit, View, MapLocation, User, ArrowDown, Fold, Expand } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'App',
  components: {
    Edit,
    View,
    MapLocation,
    User,
    ArrowDown,
    Fold,
    Expand
  },
  data() {
    return {
      isSidebarCollapsed: false,
      showAboutDialog: false,
      userInfo: {}
    }
  },
  computed: {
    // 判断是否为登录页面
    isLoginPage() {
      return this.$route.path === '/login'
    },

    currentPageTitle() {
      const routeMap = {
        '/annotation-editor': 'PC端配置',
        '/annotation-viewer': '预览展示',
        '/annotation-editorMobile': '移动端配置'
      }
      return routeMap[this.$route.path] || '景点标注管理'
    }
  },
  mounted() {
    this.loadUserInfo()
  },
  methods: {
    // 加载用户信息
    loadUserInfo() {
      const userInfoStr = sessionStorage.getItem('userInfo')
      if (userInfoStr) {
        try {
          this.userInfo = JSON.parse(userInfoStr)
        } catch (error) {
          console.error('解析用户信息失败:', error)
          this.userInfo = { nickname: '管理员' }
        }
      } else {
        this.userInfo = { nickname: '管理员' }
      }
    },

    // 处理用户下拉菜单命令
    handleUserCommand(command) {
      switch (command) {
        case 'about':
          this.showAboutDialog = true
          break
        case 'logout':
          this.handleLogout()
          break
        default:
          break
      }
    },

    // 处理登出
    handleLogout() {
      ElMessageBox.confirm(
        '确定要退出登录吗？',
        '退出确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        // 清除登录状态
        sessionStorage.removeItem('isLoggedIn')
        sessionStorage.removeItem('userInfo')

        ElMessage.success('已退出登录')

        // 跳转到登录页
        this.$router.push('/login')
      }).catch(() => {
        // 用户取消退出
      })
    },

    toggleSidebar() {
      this.isSidebarCollapsed = !this.isSidebarCollapsed
      // 这里可以添加侧边栏折叠逻辑
    }
  }
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100vh;
  overflow: hidden;
}

/* 管理后台布局 */
.admin-layout {
  height: 100vh;
}

/* 侧边栏样式 */
.admin-sidebar {
  background: #304156;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  z-index: 1001;
}

.logo-container {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #263445;
  border-bottom: 1px solid #1f2d3d;
}

.logo-icon {
  font-size: 32px;
  color: #409eff;
  margin-right: 12px;
}

.logo-title {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.sidebar-menu {
  border: none;

  .el-menu-item {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 56px;

    .el-icon {
      font-size: 18px;
      margin-right: 12px;
    }

    &:hover {
      background-color: #263445 !important;
    }

    &.is-active {
      background-color: #409eff !important;
      color: #fff !important;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: #fff;
      }
    }
  }
}

/* 顶部导航栏 */
.admin-header {
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.header-left {
  display: flex;
  align-items: center;
}

.sidebar-toggle {
  margin-right: 20px;
  font-size: 18px;
  color: #5a5e66;

  &:hover {
    color: #409eff;
  }
}

.header-right {
  display: flex;
  align-items: center;
}

.user-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #5a5e66;

  .el-icon {
    margin: 0 4px;
  }

  &:hover {
    color: #409eff;
  }
}

/* 主要内容区域 */
.admin-main {
  background: #f0f2f5;
  padding: 0;
  overflow-y: auto;
}

/* 关于对话框 */
.about-content {
  .about-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .about-icon {
      font-size: 48px;
      color: #409eff;
      margin-right: 15px;
    }

    h3 {
      margin: 0 0 5px 0;
      color: #303133;
      font-size: 20px;
    }

    p {
      margin: 0;
      color: #909399;
      font-size: 14px;
    }
  }

  .tech-tags {
    display: flex;
    gap: 8px;
    margin-top: 15px;
  }
}

/* 全局样式重置 */
body {
  margin: 0;
  padding: 0;
  background-color: #f0f2f5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .admin-sidebar {
    width: 64px !important;
  }

  .logo-title {
    display: none;
  }

  .sidebar-menu .el-menu-item span {
    display: none;
  }

  .sidebar-menu .el-menu-item {
    justify-content: center;
    padding: 0;
  }

  .header-left .el-breadcrumb {
    display: none;
  }
}
</style>
